<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
<meta name="theme-color" content="#222">
<meta name="generator" content="Hexo 5.4.0">
  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/images/icon.png">
  <link rel="icon" type="image/png" sizes="16x16" href="/images/icon.png">
  <link rel="mask-icon" href="/images/logo.svg" color="#222">

<link rel="stylesheet" href="/css/main.css">


<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
  <link rel="stylesheet" href="/lib/pace/pace-theme-minimal.min.css">
  <script src="/lib/pace/pace.min.js"></script>

<script id="hexo-configurations">
    var NexT = window.NexT || {};
    var CONFIG = {"hostname":"example.com","root":"/","scheme":"Muse","version":"7.8.0","exturl":false,"sidebar":{"position":"right","width":300,"display":"hide","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":true,"show_result":true,"style":"mac"},"back2top":{"enable":true,"sidebar":false,"scrollpercent":true},"bookmark":{"enable":true,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":"disqus","storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":false,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}}};
  </script>

  <meta name="description" content="vue框架篇vue的优点轻量级框架：只关注视图层，是一个构建数据的视图集合，大小只有几十kb； 简单易学：国人开发，中文文档，不存在语言障碍 ，易于理解和学习； 双向数据绑定：保留了angular的特点，在数据操作方面更为简单； 组件化：保留了react的优点，实现了html的封装和重用，在构建单页面应用方面有着独特的优势； 视图，数据，结构分离：使数据的更改更为简单，不需要进行逻辑代码的修改，只">
<meta property="og:type" content="article">
<meta property="og:title" content="vue面试题">
<meta property="og:url" content="http://example.com/2021/12/12/vue%E9%9D%A2%E8%AF%95%E5%9F%BA%E7%A1%80/index.html">
<meta property="og:site_name" content="爱笑爱工作-_-">
<meta property="og:description" content="vue框架篇vue的优点轻量级框架：只关注视图层，是一个构建数据的视图集合，大小只有几十kb； 简单易学：国人开发，中文文档，不存在语言障碍 ，易于理解和学习； 双向数据绑定：保留了angular的特点，在数据操作方面更为简单； 组件化：保留了react的优点，实现了html的封装和重用，在构建单页面应用方面有着独特的优势； 视图，数据，结构分离：使数据的更改更为简单，不需要进行逻辑代码的修改，只">
<meta property="og:locale" content="zh_CN">
<meta property="og:image" content="https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/7/14/1734d65dc240568e~tplv-t2oaga2asx-watermark.awebp">
<meta property="og:image" content="https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/7/14/1734d65dc2668cc8~tplv-t2oaga2asx-watermark.awebp">
<meta property="og:image" content="https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/7/14/1734d65dc3da62ed~tplv-t2oaga2asx-watermark.awebp">
<meta property="og:image" content="https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/7/14/1734d65dc48e8bf4~tplv-t2oaga2asx-watermark.awebp">
<meta property="og:image" content="https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/7/14/1734d65dcb5f42d7~tplv-t2oaga2asx-watermark.awebp">
<meta property="og:image" content="https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/7/14/1734d65dc512c1e6~tplv-t2oaga2asx-watermark.awebp">
<meta property="article:published_time" content="2021-12-12T13:31:22.172Z">
<meta property="article:modified_time" content="2021-12-12T13:30:43.446Z">
<meta property="article:author" content="爱笑">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/7/14/1734d65dc240568e~tplv-t2oaga2asx-watermark.awebp">

<link rel="canonical" href="http://example.com/2021/12/12/vue%E9%9D%A2%E8%AF%95%E5%9F%BA%E7%A1%80/">


<script id="page-configurations">
  // https://hexo.io/docs/variables.html
  CONFIG.page = {
    sidebar: "",
    isHome : false,
    isPost : true,
    lang   : 'zh-CN'
  };
</script>

  <title>vue面试题 | 爱笑爱工作-_-</title>
  






  <noscript>
  <style>
  .use-motion .brand,
  .use-motion .menu-item,
  .sidebar-inner,
  .use-motion .post-block,
  .use-motion .pagination,
  .use-motion .comments,
  .use-motion .post-header,
  .use-motion .post-body,
  .use-motion .collection-header { opacity: initial; }

  .use-motion .site-title,
  .use-motion .site-subtitle {
    opacity: initial;
    top: initial;
  }

  .use-motion .logo-line-before i { left: initial; }
  .use-motion .logo-line-after i { right: initial; }
  </style>
</noscript>

</head>

<body itemscope itemtype="http://schema.org/WebPage">
  <div class="container use-motion">
    <div class="headband"></div>
<a target="_blank" rel="noopener" href="https://github.com/aixiao0322" class="github-corner" aria-label="View source on GitHub"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#151513; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>


    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="header-inner"><div class="site-brand-container">
  <div class="site-nav-toggle">
    <div class="toggle" aria-label="切换导航栏">
      <span class="toggle-line toggle-line-first"></span>
      <span class="toggle-line toggle-line-middle"></span>
      <span class="toggle-line toggle-line-last"></span>
    </div>
  </div>

  <div class="site-meta">

    <a href="/" class="brand" rel="start">
      <span class="logo-line-before"><i></i></span>
      <h1 class="site-title">爱笑爱工作-_-</h1>
      <span class="logo-line-after"><i></i></span>
    </a>
  </div>

  <div class="site-nav-right">
    <div class="toggle popup-trigger">
    </div>
  </div>
</div>




<nav class="site-nav">
  <ul id="menu" class="main-menu menu">
        <li class="menu-item menu-item-首页">

    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>

  </li>
        <li class="menu-item menu-item-目录">

    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>目录</a>

  </li>
        <li class="menu-item menu-item-分类">

    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>

  </li>
        <li class="menu-item menu-item-标签">

    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>

  </li>
        <li class="menu-item menu-item-关于">

    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>

  </li>
  </ul>
</nav>




</div>
    </header>

    
  <div class="back-to-top">
    <i class="fa fa-arrow-up"></i>
    <span>0%</span>
  </div>
  <div class="reading-progress-bar"></div>
  <a role="button" class="book-mark-link book-mark-link-fixed"></a>


    <main class="main">
      <div class="main-inner">
        <div class="content-wrap">
          

          <div class="content post posts-expand">
            

    
  
  
  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
    <link itemprop="mainEntityOfPage" href="http://example.com/2021/12/12/vue%E9%9D%A2%E8%AF%95%E5%9F%BA%E7%A1%80/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/images/title.jpg">
      <meta itemprop="name" content="爱笑">
      <meta itemprop="description" content="热衷于前端，热衷于王者，王者峡谷乱杀 -_-">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="爱笑爱工作-_-">
    </span>
      <header class="post-header">
        <h1 class="post-title" itemprop="name headline">
          vue面试题
        </h1>

        <div class="post-meta">
            <span class="post-meta-item">
              <span class="post-meta-item-icon">
                <i class="far fa-calendar"></i>
              </span>
              <span class="post-meta-item-text">发表于</span>
              

              <time title="创建时间：2021-12-12 21:31:22 / 修改时间：21:30:43" itemprop="dateCreated datePublished" datetime="2021-12-12T21:31:22+08:00">2021-12-12</time>
            </span>
            <span class="post-meta-item">
              <span class="post-meta-item-icon">
                <i class="far fa-folder"></i>
              </span>
              <span class="post-meta-item-text">分类于</span>
                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
                  <a href="/categories/vue/" itemprop="url" rel="index"><span itemprop="name">vue</span></a>
                </span>
            </span>

          
            <span id="/2021/12/12/vue%E9%9D%A2%E8%AF%95%E5%9F%BA%E7%A1%80/" class="post-meta-item leancloud_visitors" data-flag-title="vue面试题" title="阅读次数">
              <span class="post-meta-item-icon">
                <i class="fa fa-eye"></i>
              </span>
              <span class="post-meta-item-text">阅读次数：</span>
              <span class="leancloud-visitors-count"></span>
              <span>℃</span>
            </span>
  
  <span class="post-meta-item">
    
      <span class="post-meta-item-icon">
        <i class="far fa-comment"></i>
      </span>
      <span class="post-meta-item-text">Valine：</span>
    
    <a title="valine" href="/2021/12/12/vue%E9%9D%A2%E8%AF%95%E5%9F%BA%E7%A1%80/#valine-comments" itemprop="discussionUrl">
      <span class="post-comments-count valine-comment-count" data-xid="/2021/12/12/vue%E9%9D%A2%E8%AF%95%E5%9F%BA%E7%A1%80/" itemprop="commentCount"></span>
    </a>
  </span>
  
  

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">

      
        <h2 id="vue框架篇"><a href="#vue框架篇" class="headerlink" title="vue框架篇"></a>vue框架篇</h2><h3 id="vue的优点"><a href="#vue的优点" class="headerlink" title="vue的优点"></a>vue的优点</h3><p>轻量级框架：只关注视图层，是一个构建数据的视图集合，大小只有几十kb；</p>
<p>简单易学：国人开发，中文文档，不存在语言障碍 ，易于理解和学习；</p>
<p>双向数据绑定：保留了angular的特点，在数据操作方面更为简单；</p>
<p>组件化：保留了react的优点，实现了html的封装和重用，在构建单页面应用方面有着独特的优势；</p>
<p>视图，数据，结构分离：使数据的更改更为简单，不需要进行逻辑代码的修改，只需要操作数据就能完成相关操作；</p>
<p>虚拟DOM：dom操作是非常耗费性能的，不再使用原生的dom操作节点，极大解放dom操作，但具体操作的还是dom不过是换了另一种方式；</p>
<p>运行速度更快:相比较与react而言，同样是操作虚拟dom，就性能而言，vue存在很大的优势。</p>
<span id="more"></span>

<h3 id="请详细说下你对vue生命周期的理解？"><a href="#请详细说下你对vue生命周期的理解？" class="headerlink" title="请详细说下你对vue生命周期的理解？"></a>请详细说下你对vue生命周期的理解？</h3><p>总共分为8个阶段创建前/后，载入前/后，更新前/后，销毁前/后。</p>
<blockquote>
<p>创建前/后： 在beforeCreate阶段，vue实例的挂载元素el和数据对象data都为undefined，还未初始化。在created阶段，vue实例的数据对象data有了，el为undefined，还未初始化。</p>
</blockquote>
<blockquote>
<p>载入前/后：在beforeMount阶段，vue实例的$el和data都初始化了，但还是挂载之前为虚拟的dom节点，data.message还未替换。在mounted阶段，vue实例挂载完成，data.message成功渲染。</p>
</blockquote>
<blockquote>
<p>更新前/后：当data变化时，会触发beforeUpdate和updated方法</p>
</blockquote>
<blockquote>
<p>销毁前/后：在执行destroy方法后，对data的改变不会再触发周期函数，说明此时vue实例已经解除了事件监听以及和dom的绑定，但是dom结构依然存在</p>
</blockquote>
<h3 id="为什么vue组件中data必须是一个函数？"><a href="#为什么vue组件中data必须是一个函数？" class="headerlink" title="为什么vue组件中data必须是一个函数？"></a>为什么vue组件中data必须是一个函数？</h3><p>对象为引用类型，当复用组件时，由于数据对象都指向同一个data对象，当在一个组件中修改data时，其他重用的组件中的data会同时被修改；而使用返回对象的函数，由于每次返回的都是一个新对象（Object的实例），引用地址不同，则不会出现这个问题。</p>
<h3 id="vue中v-if和v-show有什么区别？"><a href="#vue中v-if和v-show有什么区别？" class="headerlink" title="vue中v-if和v-show有什么区别？"></a>vue中v-if和v-show有什么区别？</h3><p>v-if和v-show看起来似乎差不多，当条件不成立时，其所对应的标签元素都不可见，但是这两个选项是有区别的:</p>
<p>1、v-if在条件切换时，会对标签进行适当的创建和销毁，而v-show则仅在初始化时加载一次，因此v-if的开销相对来说会比v-show大。</p>
<p>2、v-if是惰性的，只有当条件为真时才会真正渲染标签；如果初始条件不为真，则v-if不会去渲染标签。v-show则无论初始条件是否成立，都会渲染标签，它仅仅做的只是简单的CSS切换。</p>
<h3 id="computed和watch的区别"><a href="#computed和watch的区别" class="headerlink" title="computed和watch的区别"></a>computed和watch的区别</h3><h4 id="计算属性computed："><a href="#计算属性computed：" class="headerlink" title="计算属性computed："></a>计算属性computed：</h4><ul>
<li>支持缓存，只有依赖数据发生改变，才会重新进行计算</li>
<li>不支持异步，当computed内有异步操作时无效，无法监听数据的变化</li>
<li>computed 属性值会默认走缓存，计算属性是基于它们的响应式依赖进行缓存的，也就是基于data中声明过或者父组件传递的props中的数据通过计算得到的值</li>
<li>如果一个属性是由其他属性计算而来的，这个属性依赖其他属性，是一个多对一或者一对一，一般用computed</li>
<li>如果computed属性属性值是函数，那么默认会走get方法；函数的返回值就是属性的属性值；在computed中的，属性都有一个get和一个set方法，当数据变化时，调用set方法。</li>
</ul>
<h4 id="侦听属性watch："><a href="#侦听属性watch：" class="headerlink" title="侦听属性watch："></a>侦听属性watch：</h4><ul>
<li>不支持缓存，数据变，直接会触发相应的操作；</li>
<li>watch支持异步；</li>
<li>监听的函数接收两个参数，第一个参数是最新的值；第二个参数是输入之前的值；</li>
<li>当一个属性发生变化时，需要执行对应的操作；一对多；</li>
<li>监听数据必须是data中声明过或者父组件传递过来的props中的数据，当数据变化时，触发其他操作，函数有两个参数：</li>
</ul>
<blockquote>
<p>immediate：组件加载立即触发回调函数执行</p>
</blockquote>
<figure class="highlight haxe"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">watch: <span class="type"></span>&#123;</span><br><span class="line">  firstName: <span class="type"></span>&#123;</span><br><span class="line">    handler(<span class="keyword">new</span><span class="type">Name</span>, oldName) &#123;</span><br><span class="line">      <span class="built_in">this</span>.fullName = <span class="keyword">new</span><span class="type">Name</span> + <span class="string">&#x27; &#x27;</span> + <span class="built_in">this</span>.lastName;</span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="comment">// 代表在wacth里声明了firstName这个方法之后立即执行handler方法</span></span><br><span class="line">    immediate: <span class="type">true</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line">复制代码</span><br></pre></td></tr></table></figure>

<blockquote>
<p>deep: deep的意思就是深入观察，监听器会一层层的往下遍历，给对象的所有属性都加上这个监听器，但是这样性能开销就会非常大了，任何修改obj里面任何一个属性都会触发这个监听器里的 handler</p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">watch: &#123;</span><br><span class="line">  <span class="attr">obj</span>: &#123;</span><br><span class="line">    <span class="function"><span class="title">handler</span>(<span class="params">newName, oldName</span>)</span> &#123;</span><br><span class="line">      <span class="built_in">console</span>.log(<span class="string">&#x27;obj.a changed&#x27;</span>);</span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="attr">immediate</span>: <span class="literal">true</span>,</span><br><span class="line">    <span class="attr">deep</span>: <span class="literal">true</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line">复制代码</span><br></pre></td></tr></table></figure>

<p>优化：我们可以使用字符串的形式监听</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">watch: &#123;</span><br><span class="line">  <span class="string">&#x27;obj.a&#x27;</span>: &#123;</span><br><span class="line">    <span class="function"><span class="title">handler</span>(<span class="params">newName, oldName</span>)</span> &#123;</span><br><span class="line">      <span class="built_in">console</span>.log(<span class="string">&#x27;obj.a changed&#x27;</span>);</span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="attr">immediate</span>: <span class="literal">true</span>,</span><br><span class="line">    <span class="comment">// deep: true</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line">复制代码</span><br></pre></td></tr></table></figure>

<p>这样Vue.js才会一层一层解析下去，直到遇到属性a，然后才给a设置监听函数。</p>
<h3 id="vue-loader是什么？使用它的用途有哪些？"><a href="#vue-loader是什么？使用它的用途有哪些？" class="headerlink" title="vue-loader是什么？使用它的用途有哪些？"></a>vue-loader是什么？使用它的用途有哪些？</h3><p>vue文件的一个加载器，跟template/js/style转换成js模块。</p>
<h3 id="nextTick是什么？"><a href="#nextTick是什么？" class="headerlink" title="$nextTick是什么？"></a>$nextTick是什么？</h3><p>vue实现响应式并不是数据发生变化后dom立即变化，而是按照一定的策略来进行dom更新。</p>
<blockquote>
<p>nextTick 是在下次 DOM 更新循环结束之后执行延迟回调，在修改数据之后使用nextTick，则可以在回调中获取更新后的 DOM</p>
</blockquote>
<h3 id="v-for-key的作用"><a href="#v-for-key的作用" class="headerlink" title="v-for key的作用"></a>v-for key的作用</h3><p>当Vue用 v-for 正在更新已渲染过的元素列表是，它默认用“就地复用”策略。如果数据项的顺序被改变，Vue将不是移动DOM元素来匹配数据项的改变，而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。</p>
<p>为了给Vue一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key 属性。key属性的类型只能为 string或者number类型。</p>
<p>key 的特殊属性主要用在Vue的虚拟DOM算法，在新旧nodes对比时辨识VNodes。如果不使用 key，Vue会使用一种最大限度减少动态元素并且尽可能的尝试修复/再利用相同类型元素的算法。使用key，它会基于key的变化重新排列元素顺序，并且会移除 key 不存在的元素。</p>
<h3 id="Vue的双向数据绑定原理是什么？"><a href="#Vue的双向数据绑定原理是什么？" class="headerlink" title="Vue的双向数据绑定原理是什么？"></a>Vue的双向数据绑定原理是什么？</h3><p>vue.js 是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。主要分为以下几个步骤：</p>
<blockquote>
<p>1、需要observe的数据对象进行递归遍历，包括子属性对象的属性，都加上setter和getter这样的话，给这个对象的某个值赋值，就会触发setter，那么就能监听到了数据变化</p>
</blockquote>
<blockquote>
<p>2、compile解析模板指令，将模板中的变量替换成数据，然后初始化渲染页面视图，并将每个指令对应的节点绑定更新函数，添加监听数据的订阅者，一旦数据有变动，收到通知，更新视图</p>
</blockquote>
<blockquote>
<p>3、Watcher订阅者是Observer和Compile之间通信的桥梁，主要做的事情是: ①在自身实例化时往属性订阅器(dep)里面添加自己 ②自身必须有一个update()方法 ③待属性变动dep.notice()通知时，能调用自身的update()方法，并触发Compile中绑定的回调，则功成身退。</p>
</blockquote>
<blockquote>
<p>4、MVVM作为数据绑定的入口，整合Observer、Compile和Watcher三者，通过Observer来监听自己的model数据变化，通过Compile来解析编译模板指令，最终利用Watcher搭起Observer和Compile之间的通信桥梁，达到数据变化 -&gt; 视图更新；视图交互变化(input) -&gt; 数据model变更的双向绑定效果。</p>
</blockquote>
<h3 id="组件传值"><a href="#组件传值" class="headerlink" title="组件传值"></a>组件传值</h3><h4 id="父传子"><a href="#父传子" class="headerlink" title="父传子"></a>父传子</h4><p>通过props传递</p>
<figure class="highlight kotlin"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">父组件： &lt;child value = <span class="string">&#x27;传递的数据&#x27;</span> /&gt;</span><br><span class="line"></span><br><span class="line">子组件: props[<span class="string">&#x27;value&#x27;</span>],接收数据,接受之后使用和<span class="keyword">data</span>中定义数据使用方式一样</span><br><span class="line">复制代码</span><br></pre></td></tr></table></figure>

<h4 id="子传父"><a href="#子传父" class="headerlink" title="子传父"></a>子传父</h4><p>在父组件中给子组件绑定一个自定义的事件，子组件通过$emit()触发该事件并传值。</p>
<figure class="highlight kotlin"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">父组件： &lt;child <span class="meta">@receive</span> = <span class="string">&#x27;receive&#x27;</span> /&gt;</span><br><span class="line"></span><br><span class="line"> 子组件: <span class="keyword">this</span>.$emit(<span class="string">&#x27;receive&#x27;</span>,<span class="string">&#x27;传递的数据&#x27;</span>)</span><br><span class="line">复制代码</span><br></pre></td></tr></table></figure>

<h4 id="兄弟组件传值"><a href="#兄弟组件传值" class="headerlink" title="兄弟组件传值"></a>兄弟组件传值</h4><ul>
<li>通过中央通信 let bus = new Vue()</li>
</ul>
<blockquote>
<p>A：methods :{ 函数{bus.$emit(‘自定义事件名’，数据)} 发送</p>
</blockquote>
<blockquote>
<p>B：created （）{bus.$on(‘A发送过来的自定义事件名’，函数)} 进行数据接收</p>
</blockquote>
<ul>
<li>通过vuex</li>
</ul>
<h3 id="prop-验证，和默认值"><a href="#prop-验证，和默认值" class="headerlink" title="prop 验证，和默认值"></a>prop 验证，和默认值</h3><p>我们在父组件给子组件传值的时候，可以指定该props的默认值及类型，当传递数据类型不正确的时候，vue会发出警告</p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">props:</span> &#123;</span><br><span class="line">    <span class="attr">visible:</span> &#123;</span><br><span class="line">        <span class="attr">default:</span> <span class="literal">true</span>,</span><br><span class="line">        <span class="attr">type:</span> <span class="string">Boolean</span>,</span><br><span class="line">        <span class="attr">required:</span> <span class="literal">true</span></span><br><span class="line">    &#125;,</span><br><span class="line">&#125;<span class="string">,</span></span><br><span class="line"><span class="string">复制代码</span></span><br></pre></td></tr></table></figure>

<h3 id="请说下封装-vue-组件的过程"><a href="#请说下封装-vue-组件的过程" class="headerlink" title="请说下封装 vue 组件的过程"></a>请说下封装 vue 组件的过程</h3><p>首先，组件可以提升整个项目的开发效率。能够把页面抽象成多个相对独立的模块，解决了我们传统项目开发：效率低、难维护、复用性等问题。</p>
<p>然后，使用Vue.extend方法创建一个组件，然后使用Vue.component方法注册组件。子组件需要数据，可以在props中接受定义。而子组件修改好数据后，想把数据传递给父组件。可以采用emit方法。</p>
<h3 id="Vue-js的template编译"><a href="#Vue-js的template编译" class="headerlink" title="Vue.js的template编译"></a>Vue.js的template编译</h3><p>简而言之，就是先转化成AST树，再得到的render函数返回VNode（Vue的虚拟DOM节点），详细步骤如下：</p>
<blockquote>
<p>首先，通过compile编译器把template编译成AST语法树（abstract syntax tree 即 源代码的抽象语法结构的树状表现形式），compile是createCompiler的返回值，createCompiler是用以创建编译器的。另外compile还负责合并option。</p>
</blockquote>
<blockquote>
<p>然后，AST会经过generate（将AST语法树转化成render funtion字符串的过程）得到render函数，render的返回值是VNode，VNode是Vue的虚拟DOM节点，里面有（标签名、子节点、文本等等）</p>
</blockquote>
<h3 id="scss是什么？在vue-cli中的安装使用步骤是？有哪几大特性？"><a href="#scss是什么？在vue-cli中的安装使用步骤是？有哪几大特性？" class="headerlink" title="scss是什么？在vue.cli中的安装使用步骤是？有哪几大特性？"></a>scss是什么？在vue.cli中的安装使用步骤是？有哪几大特性？</h3><p>css的预编译,使用步骤如下：</p>
<p>第一步：用npm 下三个loader（sass-loader、css-loader、node-sass）</p>
<p>第二步：在build目录找到webpack.base.config.js，在那个extends属性中加一个拓展.scss</p>
<p>第三步：还是在同一个文件，配置一个module属性</p>
<p>第四步：然后在组件的style标签加上lang属性 ，例如：lang=”scss”</p>
<p>特性主要有:</p>
<ul>
<li>可以用变量，例如（$变量名称=值）</li>
<li>可以用混合器，例如（）</li>
<li>可以嵌套</li>
</ul>
<h3 id="vue如何监听对象或者数组某个属性的变化"><a href="#vue如何监听对象或者数组某个属性的变化" class="headerlink" title="vue如何监听对象或者数组某个属性的变化"></a>vue如何监听对象或者数组某个属性的变化</h3><p>当在项目中直接设置数组的某一项的值，或者直接设置对象的某个属性值，这个时候，你会发现页面并没有更新。这是因为Object.defineProperty()限制，监听不到变化。</p>
<p>解决方式：</p>
<ul>
<li>this.$set(你要改变的数组/对象，你要改变的位置/key，你要改成什么value)</li>
</ul>
<figure class="highlight kotlin"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">this</span>.$<span class="keyword">set</span>(<span class="keyword">this</span>.arr, <span class="number">0</span>, <span class="string">&quot;OBKoro1&quot;</span>); <span class="comment">// 改变数组</span></span><br><span class="line"><span class="keyword">this</span>.$<span class="keyword">set</span>(<span class="keyword">this</span>.obj, <span class="string">&quot;c&quot;</span>, <span class="string">&quot;OBKoro1&quot;</span>); <span class="comment">// 改变对象</span></span><br><span class="line">复制代码</span><br></pre></td></tr></table></figure>

<ul>
<li>调用以下几个数组的方法</li>
</ul>
<figure class="highlight isbl"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="title">splice</span>()、 <span class="title">push</span>()、<span class="title">pop</span>()、<span class="title">shift</span>()、<span class="title">unshift</span>()、<span class="title">sort</span>()、<span class="title">reverse</span>()</span></span><br><span class="line">复制代码</span><br></pre></td></tr></table></figure>

<p>vue源码里缓存了array的原型链，然后重写了这几个方法，触发这几个方法的时候会observer数据，意思是使用这些方法不用我们再进行额外的操作，视图自动进行更新。 推荐使用splice方法会比较好自定义,因为splice可以在数组的任何位置进行删除/添加操作</p>
<h3 id="常用的事件修饰符"><a href="#常用的事件修饰符" class="headerlink" title="常用的事件修饰符"></a>常用的事件修饰符</h3><ul>
<li>.stop:阻止冒泡</li>
<li>.prevent:阻止默认行为</li>
<li>.self:仅绑定元素自身触发</li>
<li>.once: 2.1.4 新增,只触发一次</li>
<li>passive: 2.3.0 新增,滚动事件的默认行为 (即滚动行为) 将会立即触发,不能和.prevent 一起使用</li>
<li>.sync 修饰符</li>
</ul>
<p>从 2.3.0 起vue重新引入了.sync修饰符，但是这次它只是作为一个编译时的语法糖存在。它会被扩展为一个自动更新父组件属性的 v-on 监听器。示例代码如下：</p>
<figure class="highlight vim"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">&lt;<span class="keyword">comp</span> :foo.<span class="keyword">sync</span>=<span class="string">&quot;bar&quot;</span>&gt;&lt;/<span class="keyword">comp</span>&gt;</span><br><span class="line">复制代码</span><br></pre></td></tr></table></figure>

<p>会被扩展为：</p>
<figure class="highlight elixir"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">&lt;comp <span class="symbol">:foo=<span class="string">&quot;bar&quot;</span></span> <span class="variable">@update</span><span class="symbol">:foo=<span class="string">&quot;val =&gt; bar = val&quot;</span>&gt;&lt;/comp&gt;</span></span><br><span class="line">复制代码</span><br></pre></td></tr></table></figure>

<p>当子组件需要更新 foo 的值时，它需要显式地触发一个更新事件：</p>
<figure class="highlight haxe"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">this</span>.$emit(<span class="string">&#x27;update:foo&#x27;</span>, <span class="keyword">new</span><span class="type">Value</span>)</span><br><span class="line">复制代码</span><br></pre></td></tr></table></figure>

<h3 id="vue如何获取dom"><a href="#vue如何获取dom" class="headerlink" title="vue如何获取dom"></a>vue如何获取dom</h3><p>先给标签设置一个ref值，再通过this.$refs.domName获取，例如：</p>
<figure class="highlight axapta"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">&lt;<span class="keyword">div</span> ref=<span class="string">&quot;test&quot;</span>&gt;&lt;/<span class="keyword">div</span>&gt;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> dom = <span class="keyword">this</span>.$refs.test</span><br><span class="line">复制代码</span><br></pre></td></tr></table></figure>

<h3 id="v-on可以监听多个方法吗？"><a href="#v-on可以监听多个方法吗？" class="headerlink" title="v-on可以监听多个方法吗？"></a>v-on可以监听多个方法吗？</h3><p>是可以的，来个例子：</p>
<figure class="highlight pgsql"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">&lt;<span class="keyword">input</span> <span class="keyword">type</span>=&quot;text&quot; v-<span class="keyword">on</span>=&quot;&#123; input:onInput,focus:onFocus,blur:onBlur, &#125;&quot;&gt;</span><br><span class="line">复制代码</span><br></pre></td></tr></table></figure>

<h3 id="assets和static的区别"><a href="#assets和static的区别" class="headerlink" title="assets和static的区别"></a>assets和static的区别</h3><p>这两个都是用来存放项目中所使用的静态资源文件。</p>
<p>两者的区别：</p>
<p>assets中的文件在运行npm run build的时候会打包，简单来说就是会被压缩体积，代码格式化之类的。打包之后也会放到static中。</p>
<p>static中的文件则不会被打包。</p>
<blockquote>
<p>建议：将图片等未处理的文件放在assets中，打包减少体积。而对于第三方引入的一些资源文件如iconfont.css等可以放在static中，因为这些文件已经经过处理了。</p>
</blockquote>
<h3 id="slot插槽"><a href="#slot插槽" class="headerlink" title="slot插槽"></a>slot插槽</h3><p>很多时候，我们封装了一个子组件之后，在父组件使用的时候，想添加一些dom元素，这个时候就可以使用slot插槽了，但是这些dom是否显示以及在哪里显示，则是看子组件中slot组件的位置了。</p>
<h3 id="vue初始化页面闪动问题"><a href="#vue初始化页面闪动问题" class="headerlink" title="vue初始化页面闪动问题"></a>vue初始化页面闪动问题</h3><p>使用vue开发时，在vue初始化之前，由于div是不归vue管的，所以我们写的代码在还没有解析的情况下会容易出现花屏现象，看到类似于的字样，虽然一般情况下这个时间很短暂，但是我们还是有必要让解决这个问题的。</p>
<p>首先：在css里加上以下代码</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-attr">[v-cloak]</span> &#123;</span><br><span class="line">    <span class="attribute">display</span>: none;</span><br><span class="line">&#125;</span><br><span class="line">复制代码</span><br></pre></td></tr></table></figure>

<p>如果没有彻底解决问题，则在根元素加上style=”display: none;” :style=”{display: ‘block’}”</p>
<h2 id="vue插件篇"><a href="#vue插件篇" class="headerlink" title="vue插件篇"></a>vue插件篇</h2><h3 id="状态管理（vuex）"><a href="#状态管理（vuex）" class="headerlink" title="状态管理（vuex）"></a>状态管理（vuex）</h3><h4 id="vuex是什么"><a href="#vuex是什么" class="headerlink" title="vuex是什么"></a>vuex是什么</h4><p>Vuex 是一个专为 Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。</p>
<h4 id="怎么使用vuex"><a href="#怎么使用vuex" class="headerlink" title="怎么使用vuex"></a>怎么使用vuex</h4><p>第一步安装</p>
<figure class="highlight cmake"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">npm <span class="keyword">install</span> vuex -S</span><br><span class="line">复制代码</span><br></pre></td></tr></table></figure>

<p>第二步创建store</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> Vue <span class="keyword">from</span> <span class="string">&#x27;vue&#x27;</span>;</span><br><span class="line"><span class="keyword">import</span> Vuex <span class="keyword">from</span> <span class="string">&#x27;vuex&#x27;</span>;</span><br><span class="line">Vue.use(Vuex);</span><br><span class="line"><span class="comment">//不是在生产环境debug为true</span></span><br><span class="line"><span class="keyword">const</span> debug = process.env.NODE_ENV !== <span class="string">&#x27;production&#x27;</span>;</span><br><span class="line"><span class="comment">//创建Vuex实例对象</span></span><br><span class="line"><span class="keyword">const</span> store = <span class="keyword">new</span> Vuex.Store(&#123;</span><br><span class="line">    <span class="attr">strict</span>:debug,<span class="comment">//在不是生产环境下都开启严格模式</span></span><br><span class="line">    <span class="attr">state</span>:&#123;</span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="attr">getters</span>:&#123;</span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="attr">mutations</span>:&#123;</span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="attr">actions</span>:&#123;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;)</span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> store;</span><br><span class="line">复制代码</span><br></pre></td></tr></table></figure>

<p>第三步注入vuex</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> Vue <span class="keyword">from</span> <span class="string">&#x27;vue&#x27;</span>;</span><br><span class="line"><span class="keyword">import</span> App <span class="keyword">from</span> <span class="string">&#x27;./App.vue&#x27;</span>;</span><br><span class="line"><span class="keyword">import</span> store <span class="keyword">from</span> <span class="string">&#x27;./store&#x27;</span>;</span><br><span class="line"><span class="keyword">const</span> vm = <span class="keyword">new</span> Vue(&#123;</span><br><span class="line">    <span class="attr">store</span>:store,</span><br><span class="line">    <span class="attr">render</span>: <span class="function"><span class="params">h</span> =&gt;</span> h(App)</span><br><span class="line">&#125;).$mount(<span class="string">&#x27;#app&#x27;</span>)</span><br><span class="line">复制代码</span><br></pre></td></tr></table></figure>

<h4 id="vuex中有几个核心属性，分别是什么？"><a href="#vuex中有几个核心属性，分别是什么？" class="headerlink" title="vuex中有几个核心属性，分别是什么？"></a>vuex中有几个核心属性，分别是什么？</h4><p>一共有5个核心属性，分别是:</p>
<ul>
<li>state 唯一数据源,Vue 实例中的 data 遵循相同的规则</li>
<li>getters 可以认为是 store 的计算属性,就像计算属性一样，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。Getter 会暴露为 store.getters 对象，你可以以属性的形式访问这些值.</li>
</ul>
<figure class="highlight pf"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> store = new Vuex.Store(&#123;</span><br><span class="line">  <span class="keyword">state</span>: &#123;</span><br><span class="line">    todos: [</span><br><span class="line">      &#123; id: <span class="number">1</span>, text: &#x27;...&#x27;, done: true &#125;,</span><br><span class="line">      &#123; id: <span class="number">2</span>, text: &#x27;...&#x27;, done: false &#125;</span><br><span class="line">    ]</span><br><span class="line">  &#125;,</span><br><span class="line">  getters: &#123;</span><br><span class="line">    doneTodos: <span class="keyword">state</span> =&gt; &#123;</span><br><span class="line">      return <span class="keyword">state</span>.todos.filter(todo =&gt; todo.done)</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line">store.getters.doneTodos // -&gt; [&#123; id: <span class="number">1</span>, text: &#x27;...&#x27;, done: true &#125;]</span><br><span class="line">复制代码</span><br></pre></td></tr></table></figure>

<ul>
<li>mutation 更改 Vuex 的 store 中的状态的唯一方法是提交 mutation,非常类似于事件,通过store.commit 方法触发</li>
</ul>
<figure class="highlight pf"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> store = new Vuex.Store(&#123;</span><br><span class="line">  <span class="keyword">state</span>: &#123;</span><br><span class="line">    count: <span class="number">1</span></span><br><span class="line">  &#125;,</span><br><span class="line">  mutations: &#123;</span><br><span class="line">    increment (<span class="keyword">state</span>) &#123;</span><br><span class="line">      // 变更状态</span><br><span class="line">      <span class="keyword">state</span>.count++</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line">store.commit(&#x27;increment&#x27;)</span><br><span class="line">复制代码</span><br></pre></td></tr></table></figure>

<ul>
<li>action Action 类似于 mutation，不同在于Action 提交的是 mutation，而不是直接变更状态，Action 可以包含任意异步操作</li>
</ul>
<figure class="highlight pf"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> store = new Vuex.Store(&#123;</span><br><span class="line">  <span class="keyword">state</span>: &#123;</span><br><span class="line">    count: <span class="number">0</span></span><br><span class="line">  &#125;,</span><br><span class="line">  mutations: &#123;</span><br><span class="line">    increment (<span class="keyword">state</span>) &#123;</span><br><span class="line">      <span class="keyword">state</span>.count++</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;,</span><br><span class="line">  actions: &#123;</span><br><span class="line">    increment (context) &#123;</span><br><span class="line">      context.commit(&#x27;increment&#x27;)</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;)</span><br><span class="line">复制代码</span><br></pre></td></tr></table></figure>

<ul>
<li>module  由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。为了解决以上问题，Vuex 允许我们将 store 分割成模块（module）。</li>
</ul>
<figure class="highlight pf"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> moduleA = &#123;</span><br><span class="line">  <span class="keyword">state</span>: () =&gt; (&#123; ... &#125;),</span><br><span class="line">  mutations: &#123; ... &#125;,</span><br><span class="line">  actions: &#123; ... &#125;,</span><br><span class="line">  getters: &#123; ... &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> moduleB = &#123;</span><br><span class="line">  <span class="keyword">state</span>: () =&gt; (&#123; ... &#125;),</span><br><span class="line">  mutations: &#123; ... &#125;,</span><br><span class="line">  actions: &#123; ... &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> store = new Vuex.Store(&#123;</span><br><span class="line">  modules: &#123;</span><br><span class="line">    a: moduleA,</span><br><span class="line">    b: moduleB</span><br><span class="line">  &#125;</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line">store.<span class="keyword">state</span>.a // -&gt; moduleA 的状态</span><br><span class="line">store.<span class="keyword">state</span>.b // -&gt; moduleB 的状态</span><br><span class="line">复制代码</span><br></pre></td></tr></table></figure>

<h4 id="ajax请求代码应该写在组件的methods中还是vuex的actions中"><a href="#ajax请求代码应该写在组件的methods中还是vuex的actions中" class="headerlink" title="ajax请求代码应该写在组件的methods中还是vuex的actions中"></a>ajax请求代码应该写在组件的methods中还是vuex的actions中</h4><p>如果请求来的数据是不是要被其他组件公用，仅仅在请求的组件内使用，就不需要放入vuex 的state里。</p>
<p>如果被其他地方复用，这个很大几率上是需要的，如果需要，请将请求放入action里，方便复用。</p>
<h4 id="从vuex中获取的数据能直接更改吗？"><a href="#从vuex中获取的数据能直接更改吗？" class="headerlink" title="从vuex中获取的数据能直接更改吗？"></a>从vuex中获取的数据能直接更改吗？</h4><p>从vuex中取的数据，不能直接更改，需要浅拷贝对象之后更改，否则报错；</p>
<h4 id="vuex中的数据在页面刷新后数据消失"><a href="#vuex中的数据在页面刷新后数据消失" class="headerlink" title="vuex中的数据在页面刷新后数据消失"></a>vuex中的数据在页面刷新后数据消失</h4><p>用sessionstorage 或者 localstorage 存储数据</p>
<figure class="highlight stylus"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">存储： sessionStorage<span class="selector-class">.setItem</span>( <span class="string">&#x27;名&#x27;</span>, JSON<span class="selector-class">.stringify</span>(值) )</span><br><span class="line">使用： sessionStorage<span class="selector-class">.getItem</span>(<span class="string">&#x27;名&#x27;</span>) ---得到的值为字符串类型，用JSON<span class="selector-class">.parse</span>()去引号；</span><br><span class="line">复制代码</span><br></pre></td></tr></table></figure>

<p>也可以引入插件vuex-persist，使用方法如下：</p>
<ul>
<li>安装</li>
</ul>
<figure class="highlight mipsasm"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">npm <span class="keyword">install </span>--save vuex-persist</span><br><span class="line"><span class="keyword">or</span></span><br><span class="line"><span class="keyword"></span>yarn <span class="keyword">add </span>vuex-persist</span><br><span class="line">复制代码</span><br></pre></td></tr></table></figure>

<ul>
<li>引入</li>
</ul>
<figure class="highlight clean"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> VuexPersistence <span class="keyword">from</span> <span class="string">&#x27;vuex-persist&#x27;</span></span><br><span class="line">复制代码</span><br></pre></td></tr></table></figure>

<ul>
<li>先创建一个对象并进行配置</li>
</ul>
<figure class="highlight livescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> vuexLocal = <span class="keyword">new</span> VuexPersistence(&#123;</span><br><span class="line">    storage: <span class="built_in">window</span>.<span class="built_in">localStorage</span></span><br><span class="line">&#125;)</span><br><span class="line">复制代码</span><br></pre></td></tr></table></figure>

<ul>
<li>引入进vuex插件</li>
</ul>
<figure class="highlight pf"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> store = new Vuex.Store(&#123;</span><br><span class="line">  <span class="keyword">state</span>: &#123; ... &#125;,</span><br><span class="line">  mutations: &#123; ... &#125;,</span><br><span class="line">  actions: &#123; ... &#125;,</span><br><span class="line">  plugins: [vuexLocal.plugin]</span><br><span class="line">&#125;) </span><br><span class="line">复制代码</span><br></pre></td></tr></table></figure>

<p>通过以上设置，在图3中各个页面之间跳转，如果刷新某个视图，数据并不会丢失，依然存在，并且不需要在每个 mutations 中手动存取 storage 。</p>
<h4 id="Vuex的严格模式是什么-有什么作用-怎么开启？"><a href="#Vuex的严格模式是什么-有什么作用-怎么开启？" class="headerlink" title="Vuex的严格模式是什么,有什么作用,怎么开启？"></a>Vuex的严格模式是什么,有什么作用,怎么开启？</h4><p>在严格模式下，无论何时发生了状态变更且不是由mutation函数引起的，将会抛出错误。这能保证所有的状态变更都能被调试工具跟踪到。</p>
<p>在Vuex.Store 构造器选项中开启,如下</p>
<figure class="highlight monkey"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> store = <span class="keyword">new</span> Vuex.Store(&#123;</span><br><span class="line"><span class="meta">    strict</span>:<span class="literal">true</span>,</span><br><span class="line">&#125;)</span><br><span class="line">复制代码</span><br></pre></td></tr></table></figure>

<h4 id="怎么在组件中批量使用Vuex的getter属性"><a href="#怎么在组件中批量使用Vuex的getter属性" class="headerlink" title="怎么在组件中批量使用Vuex的getter属性"></a>怎么在组件中批量使用Vuex的getter属性</h4><p>使用mapGetters辅助函数, 利用对象展开运算符将getter混入computed 对象中</p>
<figure class="highlight coffeescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123;mapGetters&#125; <span class="keyword">from</span> <span class="string">&#x27;vuex&#x27;</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span>&#123;</span><br><span class="line">    computed:&#123;</span><br><span class="line">        ...mapGetters([<span class="string">&#x27;total&#x27;</span>,<span class="string">&#x27;discountTotal&#x27;</span>])</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line">复制代码</span><br></pre></td></tr></table></figure>

<h4 id="组件中重复使用mutation"><a href="#组件中重复使用mutation" class="headerlink" title="组件中重复使用mutation"></a>组件中重复使用mutation</h4><p>使用mapMutations辅助函数,在组件中这么使用</p>
<figure class="highlight clean"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123; mapMutations &#125; <span class="keyword">from</span> <span class="string">&#x27;vuex&#x27;</span></span><br><span class="line">methods:&#123;</span><br><span class="line">    ...mapMutations(&#123;</span><br><span class="line">        setNumber:<span class="string">&#x27;SET_NUMBER&#x27;</span>,</span><br><span class="line">    &#125;)</span><br><span class="line">&#125;</span><br><span class="line">复制代码</span><br></pre></td></tr></table></figure>

<p>然后调用this.setNumber(10)相当调用this.$store.commit(‘SET_NUMBER’,10)</p>
<h4 id="mutation和action有什么区别"><a href="#mutation和action有什么区别" class="headerlink" title="mutation和action有什么区别"></a>mutation和action有什么区别</h4><ul>
<li>action 提交的是 mutation，而不是直接变更状态。mutation可以直接变更状态</li>
<li>action 可以包含任意异步操作。mutation只能是同步操作</li>
<li>提交方式不同</li>
</ul>
<figure class="highlight kotlin"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">action 是用<span class="keyword">this</span>.store.dispatch(<span class="string">&#x27;ACTION_NAME&#x27;</span>,<span class="keyword">data</span>)来提交。</span><br><span class="line">mutation是用<span class="keyword">this</span>.$store.commit(<span class="string">&#x27;SET_NUMBER&#x27;</span>,<span class="number">10</span>)来提交</span><br><span class="line">复制代码</span><br></pre></td></tr></table></figure>

<ul>
<li>接收参数不同，mutation第一个参数是state，而action第一个参数是context，其包含了</li>
</ul>
<figure class="highlight autohotkey"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line"><span class="built_in">    state,</span>      // 等同于 `store.state`，若在模块中则为局部状态</span><br><span class="line"><span class="built_in">    rootState,</span>  // 等同于 `store.state`，只存在于模块中</span><br><span class="line"><span class="built_in">    commit,</span>     // 等同于 `store.commit`</span><br><span class="line"><span class="built_in">    dispatch,</span>   // 等同于 `store.dispatch`</span><br><span class="line"><span class="built_in">    getters,</span>    // 等同于 `store.getters`</span><br><span class="line">    rootGetters // 等同于 `store.getters`，只存在于模块中</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">复制代码</span><br></pre></td></tr></table></figure>

<h4 id="在v-model上怎么用Vuex中state的值？"><a href="#在v-model上怎么用Vuex中state的值？" class="headerlink" title="在v-model上怎么用Vuex中state的值？"></a>在v-model上怎么用Vuex中state的值？</h4><p>需要通过computed计算属性来转换。</p>
<figure class="highlight kotlin"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line">&lt;input v-model=<span class="string">&quot;message&quot;</span>&gt;</span><br><span class="line"><span class="comment">// ...</span></span><br><span class="line">computed: &#123;</span><br><span class="line">    message: &#123;</span><br><span class="line">        <span class="keyword">get</span> () &#123;</span><br><span class="line">            <span class="keyword">return</span> <span class="keyword">this</span>.$store.state.message</span><br><span class="line">        &#125;,</span><br><span class="line">        <span class="keyword">set</span> (value) &#123;</span><br><span class="line">            <span class="keyword">this</span>.$store.commit(<span class="string">&#x27;updateMessage&#x27;</span>, value)</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">复制代码</span><br></pre></td></tr></table></figure>

<h3 id="路由页面管理（vue-router）"><a href="#路由页面管理（vue-router）" class="headerlink" title="路由页面管理（vue-router）"></a>路由页面管理（vue-router）</h3><h4 id="什么是vue-router"><a href="#什么是vue-router" class="headerlink" title="什么是vue-router"></a>什么是vue-router</h4><p>Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有：</p>
<ul>
<li>嵌套的路由/视图表</li>
<li>模块化的、基于组件的路由配置</li>
<li>路由参数、查询、通配符</li>
<li>基于 Vue.js 过渡系统的视图过渡效果</li>
<li>细粒度的导航控制</li>
<li>带有自动激活的 CSS class 的链接</li>
<li>HTML5 历史模式或 hash 模式，在 IE9 中自动降级</li>
<li>自定义的滚动条行为</li>
</ul>
<h4 id="怎么使用vue-router"><a href="#怎么使用vue-router" class="headerlink" title="怎么使用vue-router"></a>怎么使用vue-router</h4><p>第一步安装</p>
<figure class="highlight cmake"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">npm <span class="keyword">install</span> vue-router -S</span><br><span class="line"></span><br><span class="line">复制代码</span><br></pre></td></tr></table></figure>

<p>第二步在main.js中使用Vue Router组件</p>
<p><img src="https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/7/14/1734d65dc240568e~tplv-t2oaga2asx-watermark.awebp" alt="img"></p>
<p>第三步配置路由</p>
<ul>
<li>定义 (路由) 组件</li>
</ul>
<p>路由组件可以是直接定义，也可以是导入已经定义好的组件。这里导入已经定义好的组件。如下</p>
<p><img src="https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/7/14/1734d65dc2668cc8~tplv-t2oaga2asx-watermark.awebp" alt="img"></p>
<ul>
<li>定义路由（路由对象数组）</li>
</ul>
<p>定义路由对象数组。对象的path是自定义的路径（即使用这个路径可以找到对应的组件），component是指该路由对应的组件。如下：</p>
<p><img src="https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/7/14/1734d65dc3da62ed~tplv-t2oaga2asx-watermark.awebp" alt="img"></p>
<ul>
<li>实例化Vue Router对象</li>
</ul>
<p>调用Vue Router的构造方法创建一个Vue Router的实例对象，将上一步定义的路由对象数组作为参数对象的值传入。如下</p>
<p><img src="https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/7/14/1734d65dc48e8bf4~tplv-t2oaga2asx-watermark.awebp" alt="img"></p>
<ul>
<li>挂载根实例</li>
</ul>
<p><img src="https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/7/14/1734d65dcb5f42d7~tplv-t2oaga2asx-watermark.awebp" alt="img"></p>
<p>第四步在App.vue中使用路由</p>
<p>在App.vue中使用标签来显示路由对应的组件，使用标签指定当点击时显示的对应的组件，to属性就是指定组件对应的路由。如下：</p>
<p><img src="https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/7/14/1734d65dc512c1e6~tplv-t2oaga2asx-watermark.awebp" alt="img"></p>
<h4 id="怎么定义vue-router的动态路由？怎么获取传过来的动态参数？"><a href="#怎么定义vue-router的动态路由？怎么获取传过来的动态参数？" class="headerlink" title="怎么定义vue-router的动态路由？怎么获取传过来的动态参数？"></a>怎么定义vue-router的动态路由？怎么获取传过来的动态参数？</h4><p>在router目录下的index.js文件中，对path属性加上/:id。使用router对象的params.id获取动态参数</p>
<h4 id="vue-router的导航钩子"><a href="#vue-router的导航钩子" class="headerlink" title="vue-router的导航钩子"></a>vue-router的导航钩子</h4><p>常用的是router.beforeEach(to,from,next)，在跳转前进行权限判断。一共有三种：</p>
<ul>
<li>全局导航钩子：router.beforeEach(to,from,next)</li>
<li>组件内的钩子</li>
<li>单独路由独享组件</li>
</ul>
<h4 id="vue路由传参"><a href="#vue路由传参" class="headerlink" title="vue路由传参"></a>vue路由传参</h4><blockquote>
<p>使用query方法传入的参数使用this.$route.query接受</p>
</blockquote>
<blockquote>
<p>使用params方式传入的参数使用this.$route.params接受</p>
</blockquote>
<h4 id="router和route的区别"><a href="#router和route的区别" class="headerlink" title="router和route的区别"></a>router和route的区别</h4><blockquote>
<p>route为当前router跳转对象里面可以获取name、path、query、params等</p>
</blockquote>
<blockquote>
<p>router为VueRouter实例，想要导航到不同URL，则使用router.push方法</p>
</blockquote>
<h4 id="路由-TypeError-Cannot-read-property-‘matched’-of-undefined-的错误问题"><a href="#路由-TypeError-Cannot-read-property-‘matched’-of-undefined-的错误问题" class="headerlink" title="路由 TypeError: Cannot read property ‘matched’ of undefined 的错误问题"></a>路由 TypeError: Cannot read property ‘matched’ of undefined 的错误问题</h4><p>找到入口文件main.js里的new Vue()，必须使用router名，不能把router改成Router或者其他的别名</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 引入路由</span></span><br><span class="line"><span class="keyword">import</span> router <span class="keyword">from</span> <span class="string">&#x27;./routers/router.js&#x27;</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">new</span> Vue(&#123;</span><br><span class="line">    <span class="attr">el</span>: <span class="string">&#x27;#app&#x27;</span>,</span><br><span class="line">    router,    <span class="comment">// 这个名字必须使用router</span></span><br><span class="line">    <span class="attr">render</span>: <span class="function"><span class="params">h</span> =&gt;</span> h(App)</span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line">复制代码</span><br></pre></td></tr></table></figure>

<h4 id="路由按需加载"><a href="#路由按需加载" class="headerlink" title="路由按需加载"></a>路由按需加载</h4><p>随着项目功能模块的增加，引入的文件数量剧增。如果不做任何处理，那么首屏加载会相当的缓慢，这个时候，路由按需加载就闪亮登场了。</p>
<figure class="highlight coffeescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line">webpack&lt; <span class="number">2.4</span> 时</span><br><span class="line">&#123; </span><br><span class="line">    path:<span class="string">&#x27;/&#x27;</span>, </span><br><span class="line">    name:<span class="string">&#x27;home&#x27;</span>,</span><br><span class="line">    components:resolve=&gt;<span class="built_in">require</span>([<span class="string">&#x27;@/components/home&#x27;</span>],resolve)</span><br><span class="line">&#125; </span><br><span class="line">webpack&gt; <span class="number">2.4</span> 时</span><br><span class="line">&#123; </span><br><span class="line">    path:<span class="string">&#x27;/&#x27;</span>, </span><br><span class="line">    name:<span class="string">&#x27;home&#x27;</span>, </span><br><span class="line">    components:<span class="function"><span class="params">()</span>=&gt;</span><span class="keyword">import</span>(<span class="string">&#x27;@/components/home&#x27;</span>)</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">复制代码</span><br></pre></td></tr></table></figure>

<p>import()方法是由es6提出的，动态加载返回一个Promise对象，then方法的参数是加载到的模块。类似于Node.js的require方法，主要import()方法是异步加载的。</p>
<h4 id="Vue里面router-link在电脑上有用，在安卓上没反应怎么解决"><a href="#Vue里面router-link在电脑上有用，在安卓上没反应怎么解决" class="headerlink" title="Vue里面router-link在电脑上有用，在安卓上没反应怎么解决"></a>Vue里面router-link在电脑上有用，在安卓上没反应怎么解决</h4><p>Vue路由在Android机上有问题，babel问题，安装babel polypill插件解决</p>
<h4 id="Vue2中注册在router-link上事件无效解决方法"><a href="#Vue2中注册在router-link上事件无效解决方法" class="headerlink" title="Vue2中注册在router-link上事件无效解决方法"></a>Vue2中注册在router-link上事件无效解决方法</h4><p>使用@click.native。原因：router-link会阻止click事件，.native指直接监听一个原生事件</p>
<h4 id="RouterLink在IE和Firefox中不起作用（路由不跳转）的问题"><a href="#RouterLink在IE和Firefox中不起作用（路由不跳转）的问题" class="headerlink" title="RouterLink在IE和Firefox中不起作用（路由不跳转）的问题"></a>RouterLink在IE和Firefox中不起作用（路由不跳转）的问题</h4><ul>
<li>只用a标签，不使用button标签</li>
<li>使用button标签和Router.navigate方法</li>
</ul>
<h3 id="网络请求-axios"><a href="#网络请求-axios" class="headerlink" title="网络请求(axios)"></a>网络请求(axios)</h3><p>这个模块请看我的另一篇文章，此处不再整理（我太懒了）</p>
<p><a target="_blank" rel="noopener" href="https://juejin.cn/post/6847009771606769677">学会了axios封装，世界都是你的</a></p>
<h3 id="视频播放-video-js"><a href="#视频播放-video-js" class="headerlink" title="视频播放(video.js)"></a>视频播放(video.js)</h3><p>这个模块请看我的另一篇文章，此处不再整理（我太懒了）</p>
<p><a target="_blank" rel="noopener" href="https://juejin.cn/post/6850037269227634702">手把手从零开始—封装一个vue视频播放器组件</a></p>
<h3 id="vue常用ui库"><a href="#vue常用ui库" class="headerlink" title="vue常用ui库"></a>vue常用ui库</h3><h4 id="移动端"><a href="#移动端" class="headerlink" title="移动端"></a>移动端</h4><ul>
<li>mint-ui （<a target="_blank" rel="noopener" href="http://mint-ui.github.io/#!/zh-cn%EF%BC%89">http://mint-ui.github.io/#!/zh-cn）</a></li>
<li>Vant（<a target="_blank" rel="noopener" href="https://youzan.github.io/vant/#/zh-CN/home%EF%BC%89">https://youzan.github.io/vant/#/zh-CN/home）</a></li>
<li>VUX (<a target="_blank" rel="noopener" href="https://vux.li/">https://vux.li/</a>)</li>
</ul>
<h4 id="pc端"><a href="#pc端" class="headerlink" title="pc端"></a>pc端</h4><ul>
<li>element-ui（<a target="_blank" rel="noopener" href="https://element.eleme.cn/2.13/#/zh-CN/component/installation%EF%BC%89">https://element.eleme.cn/2.13/#/zh-CN/component/installation）</a></li>
<li>Ant Design of Vue（<a target="_blank" rel="noopener" href="https://www.antdv.com/docs/vue/introduce-cn/%EF%BC%89">https://www.antdv.com/docs/vue/introduce-cn/）</a></li>
<li>Avue (<a target="_blank" rel="noopener" href="https://avuejs.com/">https://avuejs.com/</a>)</li>
</ul>
<h2 id="常用webpack配置"><a href="#常用webpack配置" class="headerlink" title="常用webpack配置"></a>常用webpack配置</h2><h3 id="vue-lic3脚手架（vue-config-js）"><a href="#vue-lic3脚手架（vue-config-js）" class="headerlink" title="vue-lic3脚手架（vue.config.js）"></a>vue-lic3脚手架（vue.config.js）</h3><h4 id="publicPath"><a href="#publicPath" class="headerlink" title="publicPath"></a>publicPath</h4><p>类型：String</p>
<p>默认：’/‘</p>
<p>部署应用包时的基本 URL。默认情况下，Vue CLI会假设你的应用是被部署在一个域名的根路径上，例如<a target="_blank" rel="noopener" href="https://www.my-app.com/%E3%80%82%E5%A6%82%E6%9E%9C%E5%BA%94%E7%94%A8%E8%A2%AB%E9%83%A8%E7%BD%B2%E5%9C%A8%E4%B8%80%E4%B8%AA%E5%AD%90%E8%B7%AF%E5%BE%84%E4%B8%8A%EF%BC%8C%E4%BD%A0%E5%B0%B1%E9%9C%80%E8%A6%81%E7%94%A8%E8%BF%99%E4%B8%AA%E9%80%89%E9%A1%B9%E6%8C%87%E5%AE%9A%E8%BF%99%E4%B8%AA%E5%AD%90%E8%B7%AF%E5%BE%84%E3%80%82%E4%BE%8B%E5%A6%82%EF%BC%8C%E5%A6%82%E6%9E%9C%E4%BD%A0%E7%9A%84%E5%BA%94%E7%94%A8%E8%A2%AB%E9%83%A8%E7%BD%B2%E5%9C%A8https://www.my-app.com/my-app/%EF%BC%8C%E5%88%99%E8%AE%BE%E7%BD%AEpublicPath%E4%B8%BA/my-app/">https://www.my-app.com/。如果应用被部署在一个子路径上，你就需要用这个选项指定这个子路径。例如，如果你的应用被部署在https://www.my-app.com/my-app/，则设置publicPath为/my-app/</a></p>
<p>这个值也可以被设置为空字符串 (‘’) 或是相对路径 (‘./‘)，这样所有的资源都会被链接为相对路径，这样打出来的包可以被部署在任意路径，也可以用在类似 Cordova hybrid 应用的文件系统中。</p>
<h4 id="productionSourceMap"><a href="#productionSourceMap" class="headerlink" title="productionSourceMap"></a>productionSourceMap</h4><p>类型：boolean</p>
<p>moren：true</p>
<p>不允许打包时生成项目来源映射文件，在生产环境下可以显著的减少包的体积</p>
<blockquote>
<p>注 Source map的作用：针对打包后的代码进行的处理，就是一个信息文件，里面储存着位置信息。也就是说，转换后的代码的每一个位置，所对应的转换前的位置。有了它，出错的时候，除错工具将直接显示原始代码，而不是转换后的代码。这无疑给开发者带来了很大方便</p>
</blockquote>
<h4 id="assetsDir"><a href="#assetsDir" class="headerlink" title="assetsDir"></a>assetsDir</h4><p>放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录,默认是’’,</p>
<h4 id="indexPath"><a href="#indexPath" class="headerlink" title="indexPath"></a>indexPath</h4><p>指定生成的 index.html 的输出路径(相对于outputDir)。也可以是一个绝对路径。默认是’index.html’</p>
<h4 id="lintOnSave"><a href="#lintOnSave" class="headerlink" title="lintOnSave"></a>lintOnSave</h4><p>是否在每次保存时使用eslint检查，这个对语法的要求比较严格，对自己有要求的同学可以使用</p>
<h4 id="css"><a href="#css" class="headerlink" title="css"></a>css</h4><figure class="highlight jboss-cli"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">css: &#123;</span><br><span class="line">    <span class="string">//</span>是否启用css分离插件，默认是<span class="literal">true</span>，如果不启用css样式分离插件，打包出来的css是通过内联样式的方式注入至dom中的，</span><br><span class="line">    extract: <span class="literal">true</span>,</span><br><span class="line">    sourceMap: <span class="literal">false</span>,<span class="string">//</span>效果同上</span><br><span class="line">    modules: <span class="literal">false</span>,<span class="string">//</span> 为所有的 CSS 及其预处理文件开启 CSS Modules。</span><br><span class="line">    <span class="string">//</span> 这个选项不会影响 `*<span class="string">.vue</span>` 文件。</span><br><span class="line">  &#125;,</span><br><span class="line"></span><br><span class="line">复制代码</span><br></pre></td></tr></table></figure>

<h4 id="devServer"><a href="#devServer" class="headerlink" title="devServer"></a>devServer</h4><p>本地开发服务器配置，此处直接贴上我常用的配置，以注释的方式介绍</p>
<figure class="highlight awk"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br></pre></td><td class="code"><pre><span class="line">devServer: &#123; </span><br><span class="line">    <span class="regexp">//</span>配置开发服务器</span><br><span class="line">    host: <span class="string">&quot;0.0.0.0&quot;</span>,</span><br><span class="line">    <span class="regexp">//</span>是否启用热加载，就是每次更新代码，是否需要重新刷新浏览器才能看到新代码效果</span><br><span class="line">    hot: true,</span><br><span class="line">    <span class="regexp">//</span>服务启动端口</span><br><span class="line">    port: <span class="string">&quot;8080&quot;</span>,</span><br><span class="line">    <span class="regexp">//</span>是否自动打开浏览器默认为false</span><br><span class="line">    open: false,</span><br><span class="line">    <span class="regexp">//</span>配置http代理</span><br><span class="line">    proxy: &#123; </span><br><span class="line">      <span class="string">&quot;/api&quot;</span>: &#123; <span class="regexp">//</span>如果ajax请求的地址是http:<span class="regexp">//</span><span class="number">192.168</span>.<span class="number">0.118</span>:<span class="number">9999</span><span class="regexp">/api1那么你就可以在jajx中使用/</span>api/api1路径,其请求路径会解析</span><br><span class="line">        <span class="regexp">//</span> http:<span class="regexp">//</span><span class="number">192.168</span>.<span class="number">0.118</span>:<span class="number">9999</span><span class="regexp">/api1，当然你在浏览器上开到的还是http:/</span><span class="regexp">/localhost:8080/</span>api/api1;</span><br><span class="line">        target: <span class="string">&quot;http://192.168.0.118:9999&quot;</span>,</span><br><span class="line">        <span class="regexp">//</span>是否允许跨域，这里是在开发环境会起作用，但在生产环境下，还是由后台去处理，所以不必太在意</span><br><span class="line">        changeOrigin: true,</span><br><span class="line">        pathRewrite: &#123;</span><br><span class="line">            <span class="regexp">//</span>把多余的路径置为<span class="string">&#x27;&#x27;</span></span><br><span class="line">          <span class="string">&quot;api&quot;</span>: <span class="string">&quot;&quot;</span></span><br><span class="line">        &#125;</span><br><span class="line">      &#125;,</span><br><span class="line">      <span class="string">&quot;/api2&quot;</span>: &#123;<span class="regexp">//</span>可以配置多个代理，匹配上那个就使用哪种解析方式</span><br><span class="line">        target: <span class="string">&quot;http://api2&quot;</span>,</span><br><span class="line">        <span class="regexp">//</span> ...</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;,</span><br><span class="line"></span><br><span class="line">复制代码</span><br></pre></td></tr></table></figure>

<h4 id="pluginOptions"><a href="#pluginOptions" class="headerlink" title="pluginOptions"></a>pluginOptions</h4><p>这是一个不进行任何 schema 验证的对象，因此它可以用来传递任何第三方插件选项，例如：</p>
<figure class="highlight awk"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line">    <span class="regexp">//</span>定义一个全局的less文件，把公共样式变量放入其中，这样每次使用的时候就不用重新引用了</span><br><span class="line">    <span class="string">&#x27;style-resources-loader&#x27;</span>: &#123;</span><br><span class="line">      preProcessor: <span class="string">&#x27;less&#x27;</span>,</span><br><span class="line">      patterns: [</span><br><span class="line">        <span class="string">&#x27;./src/assets/public.less&#x27;</span></span><br><span class="line">      ]</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">复制代码</span><br></pre></td></tr></table></figure>

<h4 id="chainWebpack"><a href="#chainWebpack" class="headerlink" title="chainWebpack"></a>chainWebpack</h4><p>是一个函数，会接收一个基于 webpack-chain 的 ChainableConfig 实例。允许对内部的 webpack 配置进行更细粒度的修改。例如：</p>
<figure class="highlight stylus"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="title">chainWebpack</span><span class="params">(config)</span></span> &#123; </span><br><span class="line"><span class="comment">//添加一个路径别名 假设有在assets/img/menu/目录下有十张图片，如果全路径require(&quot;/assets/img/menu/img1.png&quot;)</span></span><br><span class="line"><span class="comment">//去引入在不同的层级下实在是太不方便了，这时候向下方一样定义一个路劲别名就很实用了</span></span><br><span class="line">    config<span class="selector-class">.resolve</span><span class="selector-class">.alias</span></span><br><span class="line">      <span class="comment">//添加多个别名支持链式调用</span></span><br><span class="line">      <span class="selector-class">.set</span>(<span class="string">&quot;assets&quot;</span>, path<span class="selector-class">.join</span>(__dirname, <span class="string">&quot;/src/assets&quot;</span>))</span><br><span class="line">      <span class="selector-class">.set</span>(<span class="string">&quot;img&quot;</span>, path<span class="selector-class">.join</span>(__dirname, <span class="string">&quot;/src/assets/img/menu&quot;</span>))</span><br><span class="line">      <span class="comment">//引入图片时只需require(&quot;img/img1.png&quot;);即可</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>


<p>作者：monkeysoft<br>链接：<a target="_blank" rel="noopener" href="https://juejin.cn/post/6850037277675454478">https://juejin.cn/post/6850037277675454478</a><br>来源：稀土掘金<br>著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。</p>

    </div>

<div>

<div>

    <div style="text-align:center;color: #ccc;font-size:14px;">-------------本文结束<i class="fa fa-paw"></i>感谢您的阅读-------------</div>

</div>


</div>

    
    
    
        

  <div class="followme">
    <p>欢迎关注我的其它发布渠道</p>

    <div class="social-list">

        <div class="social-item">
          <a target="_blank" class="social-link" href="https://weibo.com/u/6480746839">
            <span class="icon">
              <i class="fab fa-weibo"></i>
            </span>

            <span class="label">微博</span>
          </a>
        </div>

        <div class="social-item">
          <a target="_blank" class="social-link" href="https://www.zhihu.com/people/ai-xiao-92-34">
            <span class="icon">
              <i class="fab fa-zhihu"></i>
            </span>

            <span class="label">知乎</span>
          </a>
        </div>

        <div class="social-item">
          <a target="_blank" class="social-link" href="https://mp.weixin.qq.com/s/gQBZKv4EyHc_X-CSebCjIw">
            <span class="icon">
              <i class="fab fa-weixin"></i>
            </span>

            <span class="label">微信</span>
          </a>
        </div>
    </div>
  </div>


      <footer class="post-footer">

        


        
    <div class="post-nav">
      <div class="post-nav-item"></div>
      <div class="post-nav-item">
    <a href="/2021/12/12/Es6%E6%96%B0%E7%89%B9%E6%80%A7/" rel="next" title="ES6全部特性">
      ES6全部特性 <i class="fa fa-chevron-right"></i>
    </a></div>
    </div>
      </footer>
    
  </article>
  
  
  



          </div>
          
    <div class="comments" id="valine-comments"></div>

<script>
  window.addEventListener('tabs:register', () => {
    let { activeClass } = CONFIG.comments;
    if (CONFIG.comments.storage) {
      activeClass = localStorage.getItem('comments_active') || activeClass;
    }
    if (activeClass) {
      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
      if (activeTab) {
        activeTab.click();
      }
    }
  });
  if (CONFIG.comments.storage) {
    window.addEventListener('tabs:click', event => {
      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
      let commentClass = event.target.classList[1];
      localStorage.setItem('comments_active', commentClass);
    });
  }
</script>

        </div>
          
  
  <div class="toggle sidebar-toggle">
    <span class="toggle-line toggle-line-first"></span>
    <span class="toggle-line toggle-line-middle"></span>
    <span class="toggle-line toggle-line-last"></span>
  </div>

  <aside class="sidebar">
    <div class="sidebar-inner">

      <ul class="sidebar-nav motion-element">
        <li class="sidebar-nav-toc">
          文章目录
        </li>
        <li class="sidebar-nav-overview">
          站点概览
        </li>
      </ul>

      <!--noindex-->
      <div class="post-toc-wrap sidebar-panel">
          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-2"><a class="nav-link" href="#vue%E6%A1%86%E6%9E%B6%E7%AF%87"><span class="nav-number">1.</span> <span class="nav-text">vue框架篇</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#vue%E7%9A%84%E4%BC%98%E7%82%B9"><span class="nav-number">1.1.</span> <span class="nav-text">vue的优点</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E8%AF%B7%E8%AF%A6%E7%BB%86%E8%AF%B4%E4%B8%8B%E4%BD%A0%E5%AF%B9vue%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E7%9A%84%E7%90%86%E8%A7%A3%EF%BC%9F"><span class="nav-number">1.2.</span> <span class="nav-text">请详细说下你对vue生命周期的理解？</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E4%B8%BA%E4%BB%80%E4%B9%88vue%E7%BB%84%E4%BB%B6%E4%B8%ADdata%E5%BF%85%E9%A1%BB%E6%98%AF%E4%B8%80%E4%B8%AA%E5%87%BD%E6%95%B0%EF%BC%9F"><span class="nav-number">1.3.</span> <span class="nav-text">为什么vue组件中data必须是一个函数？</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#vue%E4%B8%ADv-if%E5%92%8Cv-show%E6%9C%89%E4%BB%80%E4%B9%88%E5%8C%BA%E5%88%AB%EF%BC%9F"><span class="nav-number">1.4.</span> <span class="nav-text">vue中v-if和v-show有什么区别？</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#computed%E5%92%8Cwatch%E7%9A%84%E5%8C%BA%E5%88%AB"><span class="nav-number">1.5.</span> <span class="nav-text">computed和watch的区别</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#%E8%AE%A1%E7%AE%97%E5%B1%9E%E6%80%A7computed%EF%BC%9A"><span class="nav-number">1.5.1.</span> <span class="nav-text">计算属性computed：</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E4%BE%A6%E5%90%AC%E5%B1%9E%E6%80%A7watch%EF%BC%9A"><span class="nav-number">1.5.2.</span> <span class="nav-text">侦听属性watch：</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#vue-loader%E6%98%AF%E4%BB%80%E4%B9%88%EF%BC%9F%E4%BD%BF%E7%94%A8%E5%AE%83%E7%9A%84%E7%94%A8%E9%80%94%E6%9C%89%E5%93%AA%E4%BA%9B%EF%BC%9F"><span class="nav-number">1.6.</span> <span class="nav-text">vue-loader是什么？使用它的用途有哪些？</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#nextTick%E6%98%AF%E4%BB%80%E4%B9%88%EF%BC%9F"><span class="nav-number">1.7.</span> <span class="nav-text">$nextTick是什么？</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#v-for-key%E7%9A%84%E4%BD%9C%E7%94%A8"><span class="nav-number">1.8.</span> <span class="nav-text">v-for key的作用</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#Vue%E7%9A%84%E5%8F%8C%E5%90%91%E6%95%B0%E6%8D%AE%E7%BB%91%E5%AE%9A%E5%8E%9F%E7%90%86%E6%98%AF%E4%BB%80%E4%B9%88%EF%BC%9F"><span class="nav-number">1.9.</span> <span class="nav-text">Vue的双向数据绑定原理是什么？</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%BB%84%E4%BB%B6%E4%BC%A0%E5%80%BC"><span class="nav-number">1.10.</span> <span class="nav-text">组件传值</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#%E7%88%B6%E4%BC%A0%E5%AD%90"><span class="nav-number">1.10.1.</span> <span class="nav-text">父传子</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E5%AD%90%E4%BC%A0%E7%88%B6"><span class="nav-number">1.10.2.</span> <span class="nav-text">子传父</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E5%85%84%E5%BC%9F%E7%BB%84%E4%BB%B6%E4%BC%A0%E5%80%BC"><span class="nav-number">1.10.3.</span> <span class="nav-text">兄弟组件传值</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#prop-%E9%AA%8C%E8%AF%81%EF%BC%8C%E5%92%8C%E9%BB%98%E8%AE%A4%E5%80%BC"><span class="nav-number">1.11.</span> <span class="nav-text">prop 验证，和默认值</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E8%AF%B7%E8%AF%B4%E4%B8%8B%E5%B0%81%E8%A3%85-vue-%E7%BB%84%E4%BB%B6%E7%9A%84%E8%BF%87%E7%A8%8B"><span class="nav-number">1.12.</span> <span class="nav-text">请说下封装 vue 组件的过程</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#Vue-js%E7%9A%84template%E7%BC%96%E8%AF%91"><span class="nav-number">1.13.</span> <span class="nav-text">Vue.js的template编译</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#scss%E6%98%AF%E4%BB%80%E4%B9%88%EF%BC%9F%E5%9C%A8vue-cli%E4%B8%AD%E7%9A%84%E5%AE%89%E8%A3%85%E4%BD%BF%E7%94%A8%E6%AD%A5%E9%AA%A4%E6%98%AF%EF%BC%9F%E6%9C%89%E5%93%AA%E5%87%A0%E5%A4%A7%E7%89%B9%E6%80%A7%EF%BC%9F"><span class="nav-number">1.14.</span> <span class="nav-text">scss是什么？在vue.cli中的安装使用步骤是？有哪几大特性？</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#vue%E5%A6%82%E4%BD%95%E7%9B%91%E5%90%AC%E5%AF%B9%E8%B1%A1%E6%88%96%E8%80%85%E6%95%B0%E7%BB%84%E6%9F%90%E4%B8%AA%E5%B1%9E%E6%80%A7%E7%9A%84%E5%8F%98%E5%8C%96"><span class="nav-number">1.15.</span> <span class="nav-text">vue如何监听对象或者数组某个属性的变化</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%B8%B8%E7%94%A8%E7%9A%84%E4%BA%8B%E4%BB%B6%E4%BF%AE%E9%A5%B0%E7%AC%A6"><span class="nav-number">1.16.</span> <span class="nav-text">常用的事件修饰符</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#vue%E5%A6%82%E4%BD%95%E8%8E%B7%E5%8F%96dom"><span class="nav-number">1.17.</span> <span class="nav-text">vue如何获取dom</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#v-on%E5%8F%AF%E4%BB%A5%E7%9B%91%E5%90%AC%E5%A4%9A%E4%B8%AA%E6%96%B9%E6%B3%95%E5%90%97%EF%BC%9F"><span class="nav-number">1.18.</span> <span class="nav-text">v-on可以监听多个方法吗？</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#assets%E5%92%8Cstatic%E7%9A%84%E5%8C%BA%E5%88%AB"><span class="nav-number">1.19.</span> <span class="nav-text">assets和static的区别</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#slot%E6%8F%92%E6%A7%BD"><span class="nav-number">1.20.</span> <span class="nav-text">slot插槽</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#vue%E5%88%9D%E5%A7%8B%E5%8C%96%E9%A1%B5%E9%9D%A2%E9%97%AA%E5%8A%A8%E9%97%AE%E9%A2%98"><span class="nav-number">1.21.</span> <span class="nav-text">vue初始化页面闪动问题</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#vue%E6%8F%92%E4%BB%B6%E7%AF%87"><span class="nav-number">2.</span> <span class="nav-text">vue插件篇</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%8A%B6%E6%80%81%E7%AE%A1%E7%90%86%EF%BC%88vuex%EF%BC%89"><span class="nav-number">2.1.</span> <span class="nav-text">状态管理（vuex）</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#vuex%E6%98%AF%E4%BB%80%E4%B9%88"><span class="nav-number">2.1.1.</span> <span class="nav-text">vuex是什么</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E6%80%8E%E4%B9%88%E4%BD%BF%E7%94%A8vuex"><span class="nav-number">2.1.2.</span> <span class="nav-text">怎么使用vuex</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#vuex%E4%B8%AD%E6%9C%89%E5%87%A0%E4%B8%AA%E6%A0%B8%E5%BF%83%E5%B1%9E%E6%80%A7%EF%BC%8C%E5%88%86%E5%88%AB%E6%98%AF%E4%BB%80%E4%B9%88%EF%BC%9F"><span class="nav-number">2.1.3.</span> <span class="nav-text">vuex中有几个核心属性，分别是什么？</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#ajax%E8%AF%B7%E6%B1%82%E4%BB%A3%E7%A0%81%E5%BA%94%E8%AF%A5%E5%86%99%E5%9C%A8%E7%BB%84%E4%BB%B6%E7%9A%84methods%E4%B8%AD%E8%BF%98%E6%98%AFvuex%E7%9A%84actions%E4%B8%AD"><span class="nav-number">2.1.4.</span> <span class="nav-text">ajax请求代码应该写在组件的methods中还是vuex的actions中</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E4%BB%8Evuex%E4%B8%AD%E8%8E%B7%E5%8F%96%E7%9A%84%E6%95%B0%E6%8D%AE%E8%83%BD%E7%9B%B4%E6%8E%A5%E6%9B%B4%E6%94%B9%E5%90%97%EF%BC%9F"><span class="nav-number">2.1.5.</span> <span class="nav-text">从vuex中获取的数据能直接更改吗？</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#vuex%E4%B8%AD%E7%9A%84%E6%95%B0%E6%8D%AE%E5%9C%A8%E9%A1%B5%E9%9D%A2%E5%88%B7%E6%96%B0%E5%90%8E%E6%95%B0%E6%8D%AE%E6%B6%88%E5%A4%B1"><span class="nav-number">2.1.6.</span> <span class="nav-text">vuex中的数据在页面刷新后数据消失</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#Vuex%E7%9A%84%E4%B8%A5%E6%A0%BC%E6%A8%A1%E5%BC%8F%E6%98%AF%E4%BB%80%E4%B9%88-%E6%9C%89%E4%BB%80%E4%B9%88%E4%BD%9C%E7%94%A8-%E6%80%8E%E4%B9%88%E5%BC%80%E5%90%AF%EF%BC%9F"><span class="nav-number">2.1.7.</span> <span class="nav-text">Vuex的严格模式是什么,有什么作用,怎么开启？</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E6%80%8E%E4%B9%88%E5%9C%A8%E7%BB%84%E4%BB%B6%E4%B8%AD%E6%89%B9%E9%87%8F%E4%BD%BF%E7%94%A8Vuex%E7%9A%84getter%E5%B1%9E%E6%80%A7"><span class="nav-number">2.1.8.</span> <span class="nav-text">怎么在组件中批量使用Vuex的getter属性</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E7%BB%84%E4%BB%B6%E4%B8%AD%E9%87%8D%E5%A4%8D%E4%BD%BF%E7%94%A8mutation"><span class="nav-number">2.1.9.</span> <span class="nav-text">组件中重复使用mutation</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#mutation%E5%92%8Caction%E6%9C%89%E4%BB%80%E4%B9%88%E5%8C%BA%E5%88%AB"><span class="nav-number">2.1.10.</span> <span class="nav-text">mutation和action有什么区别</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E5%9C%A8v-model%E4%B8%8A%E6%80%8E%E4%B9%88%E7%94%A8Vuex%E4%B8%ADstate%E7%9A%84%E5%80%BC%EF%BC%9F"><span class="nav-number">2.1.11.</span> <span class="nav-text">在v-model上怎么用Vuex中state的值？</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E8%B7%AF%E7%94%B1%E9%A1%B5%E9%9D%A2%E7%AE%A1%E7%90%86%EF%BC%88vue-router%EF%BC%89"><span class="nav-number">2.2.</span> <span class="nav-text">路由页面管理（vue-router）</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#%E4%BB%80%E4%B9%88%E6%98%AFvue-router"><span class="nav-number">2.2.1.</span> <span class="nav-text">什么是vue-router</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E6%80%8E%E4%B9%88%E4%BD%BF%E7%94%A8vue-router"><span class="nav-number">2.2.2.</span> <span class="nav-text">怎么使用vue-router</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E6%80%8E%E4%B9%88%E5%AE%9A%E4%B9%89vue-router%E7%9A%84%E5%8A%A8%E6%80%81%E8%B7%AF%E7%94%B1%EF%BC%9F%E6%80%8E%E4%B9%88%E8%8E%B7%E5%8F%96%E4%BC%A0%E8%BF%87%E6%9D%A5%E7%9A%84%E5%8A%A8%E6%80%81%E5%8F%82%E6%95%B0%EF%BC%9F"><span class="nav-number">2.2.3.</span> <span class="nav-text">怎么定义vue-router的动态路由？怎么获取传过来的动态参数？</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#vue-router%E7%9A%84%E5%AF%BC%E8%88%AA%E9%92%A9%E5%AD%90"><span class="nav-number">2.2.4.</span> <span class="nav-text">vue-router的导航钩子</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#vue%E8%B7%AF%E7%94%B1%E4%BC%A0%E5%8F%82"><span class="nav-number">2.2.5.</span> <span class="nav-text">vue路由传参</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#router%E5%92%8Croute%E7%9A%84%E5%8C%BA%E5%88%AB"><span class="nav-number">2.2.6.</span> <span class="nav-text">router和route的区别</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E8%B7%AF%E7%94%B1-TypeError-Cannot-read-property-%E2%80%98matched%E2%80%99-of-undefined-%E7%9A%84%E9%94%99%E8%AF%AF%E9%97%AE%E9%A2%98"><span class="nav-number">2.2.7.</span> <span class="nav-text">路由 TypeError: Cannot read property ‘matched’ of undefined 的错误问题</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E8%B7%AF%E7%94%B1%E6%8C%89%E9%9C%80%E5%8A%A0%E8%BD%BD"><span class="nav-number">2.2.8.</span> <span class="nav-text">路由按需加载</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#Vue%E9%87%8C%E9%9D%A2router-link%E5%9C%A8%E7%94%B5%E8%84%91%E4%B8%8A%E6%9C%89%E7%94%A8%EF%BC%8C%E5%9C%A8%E5%AE%89%E5%8D%93%E4%B8%8A%E6%B2%A1%E5%8F%8D%E5%BA%94%E6%80%8E%E4%B9%88%E8%A7%A3%E5%86%B3"><span class="nav-number">2.2.9.</span> <span class="nav-text">Vue里面router-link在电脑上有用，在安卓上没反应怎么解决</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#Vue2%E4%B8%AD%E6%B3%A8%E5%86%8C%E5%9C%A8router-link%E4%B8%8A%E4%BA%8B%E4%BB%B6%E6%97%A0%E6%95%88%E8%A7%A3%E5%86%B3%E6%96%B9%E6%B3%95"><span class="nav-number">2.2.10.</span> <span class="nav-text">Vue2中注册在router-link上事件无效解决方法</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#RouterLink%E5%9C%A8IE%E5%92%8CFirefox%E4%B8%AD%E4%B8%8D%E8%B5%B7%E4%BD%9C%E7%94%A8%EF%BC%88%E8%B7%AF%E7%94%B1%E4%B8%8D%E8%B7%B3%E8%BD%AC%EF%BC%89%E7%9A%84%E9%97%AE%E9%A2%98"><span class="nav-number">2.2.11.</span> <span class="nav-text">RouterLink在IE和Firefox中不起作用（路由不跳转）的问题</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%BD%91%E7%BB%9C%E8%AF%B7%E6%B1%82-axios"><span class="nav-number">2.3.</span> <span class="nav-text">网络请求(axios)</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E8%A7%86%E9%A2%91%E6%92%AD%E6%94%BE-video-js"><span class="nav-number">2.4.</span> <span class="nav-text">视频播放(video.js)</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#vue%E5%B8%B8%E7%94%A8ui%E5%BA%93"><span class="nav-number">2.5.</span> <span class="nav-text">vue常用ui库</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#%E7%A7%BB%E5%8A%A8%E7%AB%AF"><span class="nav-number">2.5.1.</span> <span class="nav-text">移动端</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#pc%E7%AB%AF"><span class="nav-number">2.5.2.</span> <span class="nav-text">pc端</span></a></li></ol></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%B8%B8%E7%94%A8webpack%E9%85%8D%E7%BD%AE"><span class="nav-number">3.</span> <span class="nav-text">常用webpack配置</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#vue-lic3%E8%84%9A%E6%89%8B%E6%9E%B6%EF%BC%88vue-config-js%EF%BC%89"><span class="nav-number">3.1.</span> <span class="nav-text">vue-lic3脚手架（vue.config.js）</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#publicPath"><span class="nav-number">3.1.1.</span> <span class="nav-text">publicPath</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#productionSourceMap"><span class="nav-number">3.1.2.</span> <span class="nav-text">productionSourceMap</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#assetsDir"><span class="nav-number">3.1.3.</span> <span class="nav-text">assetsDir</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#indexPath"><span class="nav-number">3.1.4.</span> <span class="nav-text">indexPath</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#lintOnSave"><span class="nav-number">3.1.5.</span> <span class="nav-text">lintOnSave</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#css"><span class="nav-number">3.1.6.</span> <span class="nav-text">css</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#devServer"><span class="nav-number">3.1.7.</span> <span class="nav-text">devServer</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#pluginOptions"><span class="nav-number">3.1.8.</span> <span class="nav-text">pluginOptions</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#chainWebpack"><span class="nav-number">3.1.9.</span> <span class="nav-text">chainWebpack</span></a></li></ol></li></ol></li></ol></div>
      </div>
      <!--/noindex-->

      <div class="site-overview-wrap sidebar-panel">
        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
    <img class="site-author-image" itemprop="image" alt="爱笑"
      src="/images/title.jpg">
  <p class="site-author-name" itemprop="name">爱笑</p>
  <div class="site-description" itemprop="description">热衷于前端，热衷于王者，王者峡谷乱杀 -_-</div>
</div>
<div class="site-state-wrap motion-element">
  <nav class="site-state">
      <div class="site-state-item site-state-posts">
          <a href="/archives">
          <span class="site-state-item-count">14</span>
          <span class="site-state-item-name">文章</span>
        </a>
      </div>
      <div class="site-state-item site-state-categories">
            <a href="/categories/">
        <span class="site-state-item-count">5</span>
        <span class="site-state-item-name">分类</span></a>
      </div>
      <div class="site-state-item site-state-tags">
            <a href="/tags/">
        <span class="site-state-item-count">3</span>
        <span class="site-state-item-name">标签</span></a>
      </div>
  </nav>
</div>
  <div class="sidebar-button motion-element"><i class="fa fa-comment"></i>
    评论
  </a>
  </div>
  <div class="links-of-author motion-element">
      <span class="links-of-author-item">
        <a href="https://github.com/aixiao0322" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;aixiao0322" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
      </span>
      <span class="links-of-author-item">
        <a href="https://gitee.com/aixiao0322" title="gitee → https:&#x2F;&#x2F;gitee.com&#x2F;aixiao0322" rel="noopener" target="_blank"><i class="fab fa-gratipay fa-fw"></i>gitee</a>
      </span>
      <span class="links-of-author-item">
        <a href="/aini17630247921@163.com" title="E-Mail → aini17630247921@163.com"><i class="fab fa-youtube fa-fw"></i>E-Mail</a>
      </span>
      <span class="links-of-author-item">
        <a href="https://juejin.cn/user/255500362975704" title="掘金 → https:&#x2F;&#x2F;juejin.cn&#x2F;user&#x2F;255500362975704" rel="noopener" target="_blank"><i class="fab fa-artstation fa-fw"></i>掘金</a>
      </span>
  </div>



      </div>

    </div>
  </aside>
  <div id="sidebar-dimmer"></div>


      </div>
    </main>

    <footer class="footer">
      <div class="footer-inner">
        

        

<div class="copyright">
  
  &copy; 
  <span itemprop="copyrightYear">2021</span>
  <span class="with-love">
    <i class="fa fa-heart"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">爱笑</span>
</div>
  <div class="powered-by">由 <a href="https://hexo.io/" class="theme-link" rel="noopener" target="_blank">Hexo</a> & <a href="https://muse.theme-next.org/" class="theme-link" rel="noopener" target="_blank">NexT.Muse</a> 强力驱动
  </div>

        








      </div>
    </footer>
  </div>

  
  <script src="/lib/anime.min.js"></script>
  <script src="/lib/velocity/velocity.min.js"></script>
  <script src="/lib/velocity/velocity.ui.min.js"></script>

<script src="/js/utils.js"></script>

<script src="/js/motion.js"></script>


<script src="/js/schemes/muse.js"></script>


<script src="/js/next-boot.js"></script>

<script src="/js/bookmark.js"></script>




  
















  

  


<script>
NexT.utils.loadComments(document.querySelector('#valine-comments'), () => {
  NexT.utils.getScript('//unpkg.com/valine/dist/Valine.min.js', () => {
    var GUEST = ['nick', 'mail', 'link'];
    var guest = 'nick,mail,link';
    guest = guest.split(',').filter(item => {
      return GUEST.includes(item);
    });
    new Valine({
      el         : '#valine-comments',
      verify     : false,
      notify     : true,
      appId      : 'l6M4SnuhiCKBnxpPdX1WbBB9-gzGzoHsz',
      appKey     : 'u1jJ2Fs9DGFdfpIgDQll55ju',
      placeholder: "请举手发言.... 请你填写自己的昵称，邮箱以及博客链接，为了更方便的找到您",
      avatar     : 'mm',
      meta       : guest,
      pageSize   : '10' || 10,
      visitor    : true,
      lang       : 'zh-cn' || 'zh-cn',
      path       : location.pathname,
      recordIP   : true,
      serverURLs : ''
    });
  }, window.Valine);
});
</script>

</body>
</html>
